{extend name="core@admin/public/base" /}

{block name="style"}
    <style type="text/css" media="screen">
      .top-button,
      .top-button a,
      .right-button,
      .right-button a {
          color: #909399;
          text-decoration: none;
      }
      .right-button {
        padding: 5px 8px;
        margin-left: 0px !important;
      }
      .top-button-list {
        margin-bottom: 15px;
      }
    </style>
{/block}

{block name="main"}
    <div class="ibuilder-list">
      <div class="top-button-list">
        {foreach $list_data['top_button_list'] as $key0=>$vo0}
          <?php if($vo0['page_data']['modal_type'] == 'confirm'): ?>
            <el-button
              @click="right_button_modal('{$key0}', scope)"
              class="top-button form_method"
              size="medium">
              {$vo0.title}
            </el-button>
          <?php else: ?>
            <el-button
              class="top-button"
              size="medium">
              <a :href="'<?php echo request()->root(); ?>/admin/{$vo0.page_data.path}' + '.html'">{$vo0.title}</a>
            </el-button>
          <?php endif; ?>
        {/foreach}
      </div>
      <el-table
        :data="list_data.data_list"
        style="width: 100%;margin-bottom: 20px;"
        border
        fit
        row-key="title">
        {foreach $list_data['columns'] as $key=>$vo}
          <?php if(isset($vo['template']) && $vo['template'] == 'right_button_list'): ?>
            <el-table-column
              prop="{$vo.key}"
              label="{$vo.title}"
              :sortable="false"
              width="{$vo.width}">
              <template slot-scope="scope">
                {foreach $list_data['right_button_list'] as $key1=>$vo1}
                  <?php if($vo1['page_data']['modal_type'] == 'confirm'): ?>
                    <el-button
                      @click="right_button_modal('{$key1}', scope)"
                      class="right-button form_method"
                      size="mini">
                      {$vo1.title}
                    </el-button>
                  <?php else: ?>
                    <el-button
                      class="right-button"
                      size="mini">
                      <?php if(isset($vo1['page_data']['api_suffix'][0])): ?>
                        <a :href="'<?php echo request()->root(); ?>/admin/{$vo1.page_data.path}/' + scope.row.{$vo1.page_data.api_suffix[0]} + '.html'">
                          {$vo1.title}
                        </a>
                      <?php else: ?>
                        <a :href="'<?php echo request()->root(); ?>/admin/{$vo1.page_data.path}' + '.html'">
                          {$vo1.title}
                        </a>
                      <?php endif; ?>
                    </el-button>
                  <?php endif; ?>
                {/foreach}
              </template>
            </el-table-column>
          <?php else: ?>
            <el-table-column
              prop="{$vo.key}"
              label="{$vo.title}"
              :sortable="false"
              width="{$vo.width}">
            </el-table-column>
          <?php endif; ?>
        {/foreach}
      </el-table>
{/block}

{block name="vue"}
    <script>
        {include file="core@admin/public:util" /}
        new Vue({
            el: '#app',
            data: function() {
                return {
                    {include file="core@admin/public:data" /},
                    list_data: <?php echo json_encode($list_data); ?>
                }
            },
            methods: {
                {include file="core@admin/public:methods" /},
                right_button_modal(key, scope) {
                  let button_data = this.list_data.right_button_list[key];
                  var api_suffix = '';
                  if (this.list_data.right_button_list[key].page_data.api_suffix) {
                      let asd = this.list_data.right_button_list[key].page_data.api_suffix;
                      for(let v of asd) {
                          api_suffix = api_suffix + '/' + scope.row[v];
                      };
                  } else {
                      api_suffix = '/' + scope.row.id;
                  }
                  this.$confirm(button_data.page_data.content, button_data.page_data.title, {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: button_data.page_data.okText,
                    cancelButtonText: button_data.page_data.cancelText,
                    type: 'warning'
                  }).then( async () => {
                    let res = await util.request({
                        url: button_data.page_data.api + api_suffix,
                        method: button_data.page_data.form_method
                    });
                    if (res.code=='200') {
                        this.$message({
                          type: 'success',
                          message: res.msg
                        });
                        location.reload();
                    } else {
                        this.$message({
                          type: 'error',
                          message: res.msg
                        });
                    }
                  });
                }
            }
        });
    </script>
{/block}
